<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas绘制表格</title>
    <style>
        #can{
            /* position: absolute; */
            /* top: 100px; */
            /* left: 100px; */
            /* width: 400px;
            height: 400px; */
        }
    </style>
</head>
<body>
    <div id="content"></div>
    <!-- <canvas id="can" width="800" height="800">unsupport</canvas> -->
    <canvas id="can" width="200" height="200">unsupport</canvas>
    <!-- <canvas id="can" width="100px" height="100px">unsupport</canvas> -->
    <!-- <script src="libs/hammer.js"></script> -->
    <script>
        var cells = [];
        var cell = [];
        for(let i = 0; i < 35; i++ ) {
            cell = [];
            for(let j = 0; j < 30; j++ ) {
                cell.push({
                    x: j * 100,
                    y: i * 25,
                    width: 100,
                    height: 25,
                    content: i + '--' + j,
                    font: '10px sans-serif',
                    textAlign: 'start',
                    textBaseline: 'middle',
                    color: '#000',
                    background: '#fff',
                    lineWidth: 1,
                    lineColor: '#000'
                });
            }
            cells.push(cell);
        }
        let w = document.documentElement.clientWidth;
        let h = document.documentElement.clientHeight;
        document.querySelector('#can').width = w;
        document.querySelector('#can').height = h;
        let cTab = new cTable({
            el: '#can',
            data: cells
        });
        cTab.render();
        // var myElement = document.getElementById('can');

        // var mc = new Hammer.Manager(myElement);

        // // create a pinch and rotate recognizer
        // // these require 2 pointers
        // var pinch = new Hammer.Pinch();
        // var tap = new Hammer.Tap();

        // // add to the Manager
        // mc.add([pinch,tap]);


        // mc.on("tap pinch", function(ev) {
        //     console.log(ev);
        //     document.querySelector('#content').innerHTML = ev;
        // });
    </script>
</body>
</html>